<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>5.键盘事件</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../../vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="demo">
      <h3>正常按键</h3>
      <input type="text" @keyup.enter="showInput" placeholder="按下回车打印内容"> <br>
      <input type="text" @keyup.delete="showInput" placeholder="按下退格、删除打印内容"><br>
      <input type="text" @keyup.esc="showInput" placeholder="按下esc打印内容"><br>
      <input type="text" @keyup.space="showInput" placeholder="按下空格打印内容"><br>
      <input type="text" @keydown.tab="showInput" placeholder="按下tab打印内容"><br>
      <input type="text" @keyup.up="showInput" placeholder="按下【↑】打印内容"><br>
      <input type="text" @keyup.down="showInput" placeholder="按下【↓】打印内容"><br>
      <input type="text" @keyup.left="showInput" placeholder="按下【←】打印内容"><br>
      <input type="text" @keyup.right="showInput" placeholder="按下【→】打印内容"><br>
      <input type="text" @keyup.a="showInput" placeholder="按下【a】打印内容"><br>
      <hr>

      <!-- 也可以使用键码去指定按键 -->
      <h3>也可以使用键码去指定按键</h3>
      <input type="text" @keyup.13="showInput" placeholder="按下回车打印内容"> <br>
      <hr>

      <!-- 四个特殊的按键——单独使用 -->
      <h3>四个特殊的按键——单独使用</h3>
      <input type="text" @keydown.ctrl="showInput" placeholder="按下ctrl键打印内容"> <br>
      <input type="text" @keydown.shift="showInput" placeholder="按下shift键打印内容"> <br>
      <input type="text" @keydown.alt="showInput" placeholder="按下alt键打印内容"> <br>
      <input type="text" @keydown.meta="showInput" placeholder="按下win键打印内容"> <br>
      <hr>

      <!-- 四个特殊的按键——组合使用 -->
      <h3>四个特殊的按键——组合使用</h3>
      <input type="text" @keyup.ctrl="showInput" placeholder="按下ctrl键+其他按键"> <br>
      <input type="text" @keyup.shift="showInput" placeholder="按下shift键+其他按键"> <br>
      <input type="text" @keyup.alt="showInput" placeholder="按下alt键+其他按键"> <br>
      <input type="text" @keyup.meta="showInput" placeholder="按下win键+其他按键"> <br>
    </div>

    <script type="text/javascript">
      new Vue({
        el:'#demo',
        methods:{
          showInput(event){
            console.log(event.target.value)
          }
        }
      })
    </script>
  </body>
</html>